/** @jsxImportSource @emotion/react */
import * as React from "react";
import {PreloadedQuery, usePreloadedQuery} from "react-relay/hooks";
import {ReportStarter} from "./ReportStarter";
import {ViewReportMainQuery} from "./__generated__/ViewReportMainQuery.graphql";
import {EditStorageContext} from "./StorageContext";
import {DeviceList} from "../device/DeviceList";
import {
    Button,
    IconArrowLeft, IconArrowRight,
    IconButton,
    IconCloud, IconPackage,
    MenuItem,
    MenuList,
    TwoHalfRightPanel, useMMenuBarOcup, useTheme
} from "customize-easy-ui-component";
import {Link as RouterLink} from "../routing/Link";
import {DeviceDetail} from "../device/DeviceDetail";

const graphql = require("babel-plugin-relay/macro");

//模板的版本号和相应代码维护管理是个问题；不是下载离线的，而是时刻web在线的文档格式；配套数据库数据加上配套模板才能拼凑出正式文档。要保留维护几年？有人还在用旧的。
//模板类型：支持主报告类型1个+分报告类型多个的情况，报告展示入口管理。模板版本号由后端管理。

interface ViewReportMainProps {
    prepared: {
        template: any;   //该类型的模板 主入口：
        query: PreloadedQuery<ViewReportMainQuery>;
    }
    routeData: any;
}
/**正式报告 预览 打印：
* */
function ViewReportMain( {
               prepared:{
                   template: LibofLoadable, query: myQuery
               },
               routeData
         }:  ViewReportMainProps
) {
    //确保动态加载 前端源代码的 成功
/*    const module= template.read();
        //不同版本号的模板组件入口不一样。
    const reportNode= module.reportTemplate[routeData.params.verId];
    if(!reportNode) {
        throw new Error(`没有${routeData.params.template}类型${routeData.params.verId}版本的报告模板`);
    }*/

    const data = usePreloadedQuery<ViewReportMainQuery>(
        graphql`
            query ViewReportMainQuery($id: ID! ) {
                getReport(id: $id) {
                    id
                    data
                    snapshot
                    modeltype
                    isp{id}
                }
            }
        `,
        myQuery,
    );
    const { getReport: items }=data;

    const theme = useTheme();
    const [storage, setStorage] = React.useState(null);
    //工具条高度采用与底下的主菜单条的高度一样的设置
    const { barHeight }= useMMenuBarOcup(false);
/* 底下的( { reportTemplate } :any) => {函数的 reportTemplate 实际来自xxx.E.tsx文件的：动态加载。
        export  const  reportTemplate={
          "1": <ReportView source={null} verId={'1'}/>,
        };
* */
  return (
    <div css={{
        background: "white",
        "@media not print": {
            marginBottom: `${barHeight}`,
        }
      }}
    >
          <EditStorageContext.Provider
              value={{ storage, setStorage }}
          >
              <LibofLoadable fallback={<h1>没模板主入口</h1>} >
                  {
                      ( { reportTemplate } :any) => {
                          const reportNode= reportTemplate[routeData.params.verId];
                          if(!reportNode) {
                              throw new Error(`没有${routeData.params.template}类型${routeData.params.verId}版本的报告模板`);
                          }
                          return (
                              <ViewReportMainInner items={items} reportNode={reportNode} routeData={routeData} />
                          );
                      }
                  }
              </LibofLoadable>
          </EditStorageContext.Provider>
    </div>
  );
}
//看 外套
function ViewReportMainInner( {items, reportNode, routeData}
    :{items:any, reportNode:any, routeData:any}
) {
    const {storage, setStorage} =React.useContext(EditStorageContext);

    React.useEffect(() => {
        const  dat =items&&items.data&&JSON.parse(items.data);
        const  snap =items&&items.snapshot&&JSON.parse(items.snapshot);
        if(snap)   dat && setStorage({...dat, ...snap});
        else  dat && setStorage(dat);
        console.log("参数datdat第三层路由&print qs dat=",dat,"snap",snap);
    }, [items, setStorage]);
    console.log("ViewReportMainInner层路由DDitems=",items,"storage",storage);

    return (
        <React.Fragment>
            {
                storage && <ReportStarter id={routeData.params.repId!} source={storage} template={reportNode}/>
            }
        </React.Fragment>
    );
}

export default ViewReportMain;
